<template>
  <div class="col">
    <div v-if="readonly">
      <q-field  outlined dense autogrow readonly>
        <template v-slot:default>
          <div class="row items-center text-black" >
            {{formData[formKey+'_text']}}
          </div>
      </template>
      </q-field>
    </div>
    <q-field v-else ref="shuttleField" v-model="value" outlined dense autogrow :rules="rules" @click.native="popupSelect">
      <template v-slot:default>
        <div class="truncate-chip-labels row items-center" style="min-height:40px;">
          <q-chip v-for="item in selectOptions" :key="item.value" :removable="readonly !== true" :label="item.label" @remove="removeItem(item)" />
        </div>
      </template>
      <template v-slot:after>
        <q-btn dense label="请选择" color="primary" @click="popupSelect" v-if="readonly !== true" />
      </template>
    </q-field>
    <q-dialog v-model="showDialog" maximized flat persistent>
      <q-form class="dialog_parent column" :class="getDialogClass('dialog_card column')">
        <h5 class="view_title justify-between q-px-md">
          选择数据
          <q-btn dense outline round icon="clear" size="sm" v-close-popup />
        </h5>
        <div class="col column">
          <div class="col column q-pa-md">
            <div class="col row fit q-mt-sm dialog_form non-selectable">
              <div class="col column">
                <q-toolbar class="column-select-toolbar row">
                  <q-icon size="sm" name="mdi-corn-off" color="blue-grey-13" />
                  <q-toolbar-title class="text-subtitle2">未选择</q-toolbar-title>
                  <q-input outlined dense placeholder="请输入关键字搜索" class="on-left" clearable @input="queryUnselect" debounce="500" v-model="unSelectKey" />
                </q-toolbar>
                <q-separator class="q-mb-sm" />
                <q-scroll-area class="col text-center">
                  <q-list class="column" bordered separator>
                    <q-item class="bg-grey-2 non-selectable">
                      <q-item-section>名称</q-item-section>
                    </q-item>
                    <q-item v-for="item in unSelectListFiltered" :key="item.value" clickable v-ripple :active="selected === item" @click="selected = item"
                      @dblclick="select()">
                      <q-item-section>{{ ellipsis(item.label, 8) }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-scroll-area>
                <div class="row justify-center" v-if="selectMax > 1">
                  <q-pagination v-model="selectCurrent" :max="selectMax" input />
                </div>
              </div>
              <div class="column justify-center">
                <q-btn flat color="primary" @click="unselect()" icon="mdi-arrow-left" />
                <q-btn flat color="primary" @click="unselectAll()" icon="mdi-arrow-left-thick" />
                <q-btn flat color="primary" @click="select()" icon="mdi-arrow-right" />
                <q-btn flat color="primary" @click="selectAll()" icon="mdi-arrow-right-thick" />
              </div>
              <div class="col column">
                <q-toolbar class="column-select-toolbar">
                  <q-icon size="sm" name="mdi-corn" color="primary" />
                  <q-toolbar-title class="text-subtitle2">已选择
                  </q-toolbar-title>
                  <q-input outlined dense placeholder="请输入关键字搜索" class="on-left" clearable @input="querySelect" debounce="500" v-model="selectKey" />
                </q-toolbar>
                <q-separator class="q-mb-sm" />
                <q-scroll-area class="col text-center">
                  <q-list class="column" bordered separator>
                    <q-item class="bg-grey-2">
                      <q-item-section>名称</q-item-section>
                    </q-item>
                    <q-item v-for="item in selectListFiltered" :key="item.value" clickable v-ripple :active="selected === item" @click="selected = item"
                      @dblclick="unselect()">
                      <q-item-section class>{{ ellipsis(item.label, 8) }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-scroll-area>
                <div class="row justify-center" v-if="unselectMax > 1">
                  <q-pagination v-model="unselectCurrent" :max="unselectMax" input />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row justify-center q-pb-md q-pr-md">
          <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
          <q-btn class="q-mx-sm" color="primary" icon="mdi-check-bold" label="提交" @click="saveShuttle" />
        </div>
      </q-form>
    </q-dialog>
  </div>
</template>

<script>
import { ellipsis } from 'boot/datatype';

export default {
  props: {
    value: [String, Array],
    options: {
      type: Array,
    },
    readonly: {
      type: Boolean,
    },
    disable: {
      type: Boolean,
    },
    rules: {
      type: Array,
      required: false,
      default: () => [],
    },
    formData: {
      type: Object,
      required: true,
    },
    formKey: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      maximized: false,
      loading: false,
      showDialog: false,
      selectCurrent: 1,
      selectMax: 1,
      unSelectKey: '',
      selectKey: '',
      unselectCurrent: 1,
      unselectMax: 1,
      selected: '',
      selectList: [],
      unSelectList: [],
      selectOptions: [],
      selectValueList: [],
      selectLabelList: [],
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    ellipsis,
    getDialogClass(def) {
      if (this.$q.platform.is.mobile) {
        this.maximized = true;
        return 'dialog_full column';
      }
      this.maximized = false;
      return def;
    },
    init() {
      this.unSelectList = JSON.parse(JSON.stringify(this.options));
      if (this.value && Array.isArray(this.value)) {
        this.selectList = [];
        this.unSelectList.forEach((u) => {
          if (this.value.indexOf(u.value) > -1) {
            this.selectList.push(u);
          }
        });
      } else if (!this.value) {
        this.selectList = [];
      }
      this.selectList.forEach((s) => {
        this.unSelectList = this.unSelectList.filter((x) => s.value !== x.value);
      });
      this.caclSelectOption();
    },
    querySelect() {

    },
    queryUnselect() {

    },
    popupSelect() {
      if (this.readonly !== true) {
        this.init();
        this.showDialog = true;
      }
    },
    saveShuttle() {
      this.caclSelectOption();
      this.$emit('selectedValue', this.selectValueList.join(','), this.selectLabelList.join(','));
      this.$refs.shuttleField.resetValidation();
      this.showDialog = false;
    },
    caclSelectOption() {
      this.selectOptions = [];
      this.selectValueList = [];
      this.selectLabelList = [];
      this.selectList.forEach((sel) => {
        this.selectOptions.push(sel);
        this.selectValueList.push(sel.value);
        this.selectLabelList.push(sel.label);
      });
    },
    removeItem(item) {
      this.selected = item;
      this.unselect();
      this.caclSelectOption();
      this.$emit('selectedValue', this.selectValueList.join(','), this.selectLabelList.join(','));
    },
    select() {
      if (this.selected !== '') {
        const item = this.unSelectList.find((data) => this.selected === data);
        if (item) {
          this.unSelectList.splice(this.unSelectList
            .findIndex((data) => this.selected === data), 1);
          this.selectList.push(item);
        }
      }
    },
    unselect() {
      if (this.selected !== '') {
        const item = this.selectList.find((data) => this.selected === data);
        if (item) {
          this.selectList.splice(this.selectList.findIndex((data) => item === data), 1);
          this.unSelectList.push(item);
        }
      }
    },
    selectAll() {
      if (this.unSelectList.length > 0) {
        this.selectList = this.selectList.concat(this.unSelectList);
        this.unSelectList = [];
      }
    },
    unselectAll() {
      if (this.selectList.length > 0) {
        this.unSelectList = this.unSelectList.concat(this.selectList);
        this.selectList = [];
        this.activeData.config[`${this.tab}List`] = [];
      }
    },
  },
  watch: {
    options() {
      this.init();
    },
    value() {
      this.init();
    },
  },
  computed: {
    selectListFiltered() {
      return this.selectList.filter(((r) => (!this.selectKey || r.label.indexOf(this.selectKey) > -1)));
    },
    unSelectListFiltered() {
      return this.unSelectList.filter(((r) => (!this.unSelectKey || r.label.indexOf(this.unSelectKey) > -1)));
    }
  }
};
</script>

<style scoped lang="stylus">
.truncate-chip-labels > .q-chip
  max-width 140px
</style>
